<template>
  <div  id="big" style="text-align: center">
    <span style="font-size: 6em;color: white">陈益禾私人健康诊所</span>
    <el-card style="width: 400px;margin-top: 300px;background: none;float: right;margin-right: 50px">
      <div slot="header">
        <span style="font-size: 1.5em;color: white">登录</span>
      </div>
      <div>
        <el-form class="register" style="padding-left:40px;padding-top: 50px;">
          <el-form-item style="margin-right: 50px;margin-top: 30px">
            <span style="color: white">账号：</span>
            <el-input v-model="user.account" style="width: 210px"></el-input>
          </el-form-item>
          <el-form-item style="margin-right: 50px">
            <span style="color: white">密码：</span>
            <el-input v-model="user.password" type="password"  style="width: 210px"></el-input>
          </el-form-item>
          <el-form-item style="margin-right: 50px">
            <span style="color: white">姓名：</span>
            <el-input v-model="user.name"  style="width: 210px"></el-input>
          </el-form-item>
          <el-form-item style="margin-right: 30px">
            <el-button @click="register" type="primary" style="color: white;background: none;border: none;font-size: 20px">注册</el-button>
            <br>
            <el-button @click="$router.push('/login')" type="text" style="color: white">已有帐号？去登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "register",
  data() {
    return {
      user: {},
    }
  },
  methods: {
    register() {
      this.$axios.post('/api/user/register', this.user).then((res) => {
        console.log(res);
        if (res.data.status === 1) {
          this.$message.success('注册成功');
          this.$router.push('/login');
        } else {
          this.$message.error('注册失败');
        }
      })
    }
  }
}
</script>

<style scoped>
#big{
  background-image: url("../img/http___img.zcool.cn_community_01e0c959286c4ea801216a3ef0028e.jpg&refer=http___img.zcool.jpg");
  background-size: 100% 100%;
  height: 936px;
}
</style>